<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: charles
 * @LastEditTime: 2021-07-14 15:19:22
-->
<template>
   <div class="item">
     <div class="zhengwu">
       <div class="zw" ref="root"></div>
       <p class="i">政务大厅</p>
       <p class="b">办件量19878件</p>
       <p class="c">占比69.74%</p>
     </div>
     <div class="yilu">
       <div class="yl" ref="init"></div>
       <p class="d">一鹿快办</p>
       <p class="e">办件量6592件</p>
       <p class="f">占比23.13%</p>
     </div>
     <div class="fuwu">
       <div class="fw" ref="title"></div>
       <p class="g">政务服务网</p>
       <p class="h">办件量1435件</p>
       <p class="j">占比5.03%</p>
     </div>
     <div class="yiti">
       <div class="yt" ref="index"></div>
       <p class="k">一体机</p>
       <p class="l">办件量600件</p>
       <p class="m">占比2.10%</p>
     </div>
   </div>
</template>
<script>
import {Liquid} from '@antv/g2plot'
import { ref,onMounted } from 'vue'
export default {
  setup(){
     const root = ref(null)
    let liquidPlot = null
    let initChart = ()=>{
        liquidPlot = new Liquid(root.value, {
          percent: 0.6974,
          color:'#23fffc',
          outline: {
            border: 3,
            distance: 5,
          },
          wave: {
            length: 128,
          },
        });
liquidPlot.render();
    }

    const init = ref(null)
    let intChart = ()=>{
        liquidPlot = new Liquid(init.value, {
          percent: 0.2313,
          color:'#b7d1a0',
          outline: {
            border: 3,
            distance: 5,
          },
          wave: {
            length: 128,
          },
        });
liquidPlot.render();
    }

     const title = ref(null)
    let itChart = ()=>{
        liquidPlot = new Liquid(title.value, {
          percent: 0.0503,
          color:'#2292fb',
          outline: {
            border: 3,
            distance: 5,
          },
          wave: {
            length: 128,
          },
        });
liquidPlot.render();
    }

    const index = ref(null)
    let iChart = ()=>{
        liquidPlot = new Liquid(index.value, {
          percent: 0.0210,
          color:'#ae00ff',
          outline: {
            border: 3,
            distance: 5,
          },
          wave: {
            length: 128,
          },
        });
liquidPlot.render();
    }

    onMounted(initChart)
    onMounted(intChart)
    onMounted(itChart)
    onMounted(iChart)

    return{
      root,
      init,
      title,
      index
    }
  }
}
</script>

<style scoped lang="scss">
.item{
  width: 736px;
  height: 346px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .zhengwu{
    width: 114px;
    height: 304px;
    font-size: 16px;
    text-align: center;
    flex: 1;
    color: #fff;
    padding: 1em 1em;
    .zw{
      width: 160px;
      height:150px ;
      margin: 0 auto;
      margin-top: 20px;
    }
    .i{
      text-align: center;
      height: 20px;
      font-size: 14px;
      margin: 10px 0;
    }
    .b{
      text-align: center;
      height: 20px;
      font-size: 14px;
      margin: 10px 0;
    }
    .c{
      text-align: center;
      height: 20px;
      font-size: 14px;
      margin: 10px 0;
    }
  }
  .yilu{
     width: 114px;
    height: 304px;
    font-size: 16px;
    text-align: center;
    flex: 1;
    color: #fff;
    padding: 1em 1em;
    .yl{
      width: 160px;
      height:150px ;
      margin: 0 auto;
      margin-top: 20px;
    }
     .d{
       text-align: center;
      height: 20px;
      font-size: 14px;
      margin: 10px 0;
     }
     .e{
       text-align: center;
      height: 20px;
      font-size: 14px;
      margin: 10px 0;
     }
     .f{text-align: center;
      height: 20px;
      font-size: 14px;
      margin: 10px 0;}
  }
  .fuwu{
     width: 114px;
    height: 304px;
    font-size: 16px;
    text-align: center;
    flex: 1;
    color: #fff;
    padding: 1em 1em;
    .fw{
      width: 160px;
      height:150px ;
      margin: 0 auto;
      margin-top: 20px;
    }
     .g{
       text-align: center;
      height: 20px;
      font-size: 14px;
      margin: 10px 0;
     }
     .h{
       text-align: center;
      height: 20px;
      font-size: 14px;
      margin: 10px 0;
     }
     .j{
       text-align: center;
      height: 20px;
      font-size: 14px;
      margin: 10px 0;
     }
  }
  .yiti{
 width: 114px;
    height: 304px;
    font-size: 16px;
    text-align: center;
    flex: 1;
    color: #fff;
    padding: 1em 1em;
    .yt{
      width: 160px;
      height:150px ;
      margin: 0 auto;
      margin-top: 20px;
    }
     .k{
       text-align: center;
      height: 20px;
      font-size: 14px;
      margin: 10px 0;
     }
     .l{
       text-align: center;
      height: 20px;
      font-size: 14px;
      margin: 10px 0;
     }
     .m{
       text-align: center;
      height: 20px;
      font-size: 14px;
      margin: 10px 0;
     }
  }
}
</style>